<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>智慧书店</el-breadcrumb-item>
        <el-breadcrumb-item>购物车管理</el-breadcrumb-item>
      </el-breadcrumb>

      <el-form ref="form" :model="form" label-width="80px">
       商品名称:
          <el-select v-model="searchName" placeholder="请选择">
            <el-option
                    v-for="item in bookList"
                    :label="item.bookName"
                    :value="item.code">
            </el-option>
          </el-select>
      </el-form>

      <el-table
        border
        :data="shoppingCartList"
        >
        <el-table-column
          prop="id"
          label="购物车编号"
          align="center">
        </el-table-column>
        <el-table-column
           prop="bookDetailedList.bookName"
           label="图书名称"
           align="center">
        </el-table-column>
        <el-table-column
          prop="bookDetailedList.bookPrice"
          label="图书价格"
          align="center">
        </el-table-column>
        <el-table-column
          prop="bookNum"
          label="图书数量"
          align="center">
        </el-table-column>
        <el-table-column label="图书总价" align="center">
          <template slot-scope="scope">
            {{scope.row.bookNum * scope.row.bookDetailedList.bookPrice}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center">
          <!--点击按钮 需要绑定@click的时间 例如 @click="add"-->
          <template slot-scope="scope">
              <el-button type="warning" size="mini" @click="delById(scope.row.id)">取消购物车</el-button>
              <el-button type="warning" size="mini" @click="payById(scope.row.bookDetailedCode,scope.row.bookNum)">下单</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--<div class="block">-->
        <!--<el-pagination-->
          <!--@size-change="handleSizeChange"-->
          <!--@current-change="handleCurrentChange"-->
          <!--:current-page="page.currentPage"-->
          <!--:page-sizes="[5, 10, 15, 20]"-->
          <!--:page-size="page.pageSize"-->
          <!--layout="total, sizes, prev, pager, next, jumper"-->
          <!--:total="total">-->
        <!--</el-pagination>-->

      <!--</div>-->
    </el-card>
  </div>
</template>

<script>
    import moment from 'moment'
    export default {

        name: "ShoppingCartList",
        data(){
            return{
                form:{},
                searchName:'',
                shoppingCartList:[],
                bookList:[],
                userInfo:{}
            }
        },
        methods:{
            findshoppingCartList() {
                this.$http.post('/shoppingCart/showShoppingCart?userInfoCode='+this.userInfo.code).then(res=>{
                  console.log(res)
                   if (res.data.success){
                     this.shoppingCartList= res.data.result.tbShoppingRecords
                   } else {
                     this.$message.error(res.data.message)
                   }
                })
            },
            findBookList:function() {
                this.$http.post('/book/findAllBookDetailed').then((res)=>{
                    this.bookList = res.data.result.bookDetailedList;

                })
            },
            delById(id){
                this.$http.post('/shoppingCart/delShoppingCart?shoppingCartId='+id).then((res)=>{
                    if (res.data.success) {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                    }
                    this.findshoppingCartList();
                })
            },
            payById:function(val,val2){
                this.$http.post('/orderRecord/createOrderRecord1?userInfoCode='+this.userInfo.code+'&code='+val+'&num='+val2).then((res)=>{
                    if(res.data.success){
                        this.$message.success("订单记录已生成")
                        this.$router.push({name:'OrderRecordList'})
                    }else{
                        this.$message.error(res.data.message)
                        this.findshoppingCartList();
                    }
                })
            }

        },
        mounted() {
            this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
            this.findshoppingCartList();
            this.findBookList();
        },watch:{
            searchName:function (val) {
                this.$http.post('/shoppingCart/findShoppingRecordByCode?userInfoCode='+this.userInfo.code+'&bookDetailedCode='+val).then(res=>{
                     console.log(val)
                    // this.shoppingCartList=res.data.result.tbShoppingRecord;
                     this.shoppingCartList = []
                    this.shoppingCartList.push(res.data.result.tbShoppingRecord)
                })
            }
        },
    }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .box-card {
    width: 100%;
  }
</style>
